<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Preview Slideshow</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		body {
			padding: 0;
			background-color: #fff;
			font-size: 14px;
			font-family: 'Avenir Next';
			color: #555;
			-webkit-font-smoothing: antialiased;
		}

		.slider .main .main-i,
		.slider .main,
		.slider {
			width: 100%;
			height: 538px;
			margin: auto;
			position: relative;
		}

		.slider .main {
			overflow: hidden;
		}

		.slider .main .main-i {}

		.slider .main .main-i img {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 50%;
			z-index: 1;
		}

		.slider .main .main-i .caption {
			position: absolute;
			left: 50%;
			top: 30%;
			z-index: 9;
		}

		.slider .main .main-i .caption h2 {
			font-size: 40px;
			line-height: 40px;
			color: #B5B5B5;
			text-align: right;
		}

		.slider .main .main-i .caption h3 {
			font-size: 60px;
			line-height: 60px;
			color: #000000;
			text-align: right;
			font-family: 'Open Sans Condensed';
		}

		.slider .ctrl {
			width: 100%;
			height: 13px;
			line-height: 13px;
			text-align: center;
			position: absolute;
			left: 0;
			bottom: -13px;
			/*background-color: #F00;*/
		}

		.slider .ctrl .ctrl-i {
			display: inline-block;
			width: 150px;
			height: 13px;
			background-color: #666;
			box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
			position: relative;
			margin-left: 1px;
		}

		.slider .ctrl img {
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 50px;
			z-index: 2;
			opacity: 0;
			-webkit-transition: all .2s;
		}

		.slider .ctrl .ctrl-i:hover {
			background-color: #f0f0f0;
		}

		.slider .ctrl .ctrl-i:hover img {
			bottom: 13px;
			/* 添加倒影 */
			-webkit-box-reflect: below 0px -webkit-gradient(linear,
				left top,
				left bottom,
				from(transparent),
				color-stop(50%, transparent),
				to(rgba(255, 255, 255, .3)));
			opacity: 1;
		}

		.slider .ctrl .ctrl-i_active:hover,
		.slider .ctrl .ctrl-i_active {
			background-color: #000;
			z-index: 2;
		}

		.slider .ctrl .ctrl-i_active:hover img {
			opacity: 0;
			z-index: 2;
		}

		.slider .main .main-i {
			opacity: 0;
			position: absolute;
			right: 50%;
			top: 0;
			-webkit-transition: all .5s;
			z-index: 2;
		}

		.slider .main .main-i_right {
			right: -50%;
		}

		.slider .main .main-i h2 {
			margin-right: 45px;
		}

		.slider .main .main-i h3 {
			margin-right: -45px;
		}

		.slider .main .main-i h2,
		.slider .main .main-i h3 {
			opacity: 0;
			-webkit-transition: all 1s .8s;
		}

		#main_background,
		.slider .main .main-i_active {
			right: 0;
			opacity: 1;
			z-index: 2;
		}

		#main_background {
			z-index: 1;
		}

		.slider .main .main-i_active h2,
		.slider .main .main-i_active h3 {
			margin-right: 0px;
			opacity: 1;
		}

		.slider .main .main-i .caption {
			margin-right: 13%;
		}
	</style>
</head>

<body>
	<div class="slider">
		<div class="main" id="template_main">
			<div class="main-i {{css}}" id="main_{{index}}">
				<div class="caption">
					<h2>{{h2}}</h2>
					<h3>{{h3}}</h3>
				</div>
				<img src="images/{{index}}.jpg" alt="" class="picture" />
			</div>
		</div>

		<div class="ctrl" id="template_ctrl">
			<a href="javascript: switchSlider({{index}});" class="ctrl-i" id="ctrl_{{index}}">
				<img src="images/{{index}}.jpg" alt="" />
			</a>
		</div>
		<script type="text/javascript">
			var data = [
				{ img: 1, h1: "It's easy", h2: 'love you' },
				{ img: 2, h1: "It's hard", h2: 'love you' },
				{ img: 3, h1: "It's miku", h2: 'love you' },
				{ img: 4, h1: "It's miku", h2: 'love you' },
			];

			var g = function (id) {
				if (id.substr(0, 1) == '.') {
					return document.getElementsByClassName(id.substr(1));
				}
				return document.getElementById(id);
			}

			function addSliders() {
				// 3.1 将获得的模板前后的空白符去掉
				var tpl_main = g('template_main').innerHTML.replace(/^\s*/, '').replace(/^s*$/, '');
				var tpl_ctrl = g('template_ctrl').innerHTML.replace(/^\s*/, '').replace(/^s*$/, '');

				// 3.2 定义最终输出的 HTML 的变量
				var out_main = [];
				var out_ctrl = [];

				// 3.3 遍历所有数据，构建最终输出的 HTML
				for (i in data) {
					// 生成数组下标取值 'main-i_right'][i%2]
					var _html_main = tpl_main.replace(/{{index}}/g, data[i].img).replace(/{{h2}}/g, data[i].h1).replace(/{{h3}}/g, data[i].h2).replace(/{{css}}/g, ['', 'main-i_right'][i % 2]);
					var _html_ctrl = tpl_ctrl.replace(/{{index}}/g, data[i].img);

					out_main.push(_html_main);
					out_ctrl.push(_html_ctrl);
				}

				// 3.4 把 HTML 回写到对应的 DOM 里面
				g('template_main').innerHTML = out_main.join('');
				g('template_ctrl').innerHTML = out_ctrl.join('');

				// 7. 增加 #main_background 
				g('template_main').innerHTML += tpl_main.replace(/{{index}}/g, '{{index}}').replace(/{{h2}}/g, data[i].h1).replace(/{{h3}}/g, data[i].h2);
				g('main_{{index}}').id = 'main_background';
			}

			// 幻灯片切换
			function switchSlider(n) {
				//	5.1 获得要展现的幻灯&控制器按钮 DOM
				var main = g('main_' + n);
				var ctrl = g('ctrl_' + n);

				// 5.2 获得所有的幻灯片以及控制按钮
				var clear_main = g('.main-i');
				var clear_ctrl = g('.ctrl-i');

				// 5.3 清除它们的 active
				for (i = 0; i < clear_ctrl.length; i++) {
					clear_main[i].className = clear_main[i].className.replace(' main-i_active', '');
					clear_ctrl[i].className = clear_ctrl[i].className.replace(' ctrl-i_active', '');
				}

				// 5.4 为当前控制按钮和幻灯片附加样式
				main.className += ' main-i_active';
				ctrl.className += ' ctrl-i_active';

				// 7.2 切换时，复制上一张幻灯片到 main_background 中
				setTimeout(function () {
					g('main_background').innerHTML = main.innerHTML;
				}, 1000)
			}

			// 6. 动态调整图片的 margin-top ，以使其垂直居中
			function movePictures() {
				var pictures = g('.picture');
				for (i = 0; i < pictures.length; i++) {
					pictures[i].style.marginTop = (-1 * pictures[i].clientHeight / 2) + 'px';
				}
			}

			// 4. 页面渲染 加载数据
			window.onload = function () {
				addSliders();
				switchSlider(1);
				setTimeout(function () {
					movePictures()
				}, 100)
			}
		</script>
	</div>
</body>

</html>